<template>
    <el-table height="100%" :data="tableData.rows" tooltip-effect="dark" v-loading="tableData.loading" @sort-change="tableSortChange" :default-sort="tableSortCondition">
        <template slot="empty">
            <no-data :types="tableData.isSearch">
                <span>暂无数据</span>
            </no-data>
        </template>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="projectCode" label="项目代码" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ownerUserName" label="项目负责人" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="createOper" label="管理员账号" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" min-width="130" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button v-hasPermission="'project:operate'" :disabled="!scope.row.isOwner" type="text" @click="handleToSet(scope)">项目设置</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button v-hasPermission="'project:operate'" @click="handleToExp(scope.row.projectId)" type="text">进入机器学习</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import {
    mapGetters,
    mapMutations
} from 'vuex'
import NoData from '@/components/NoData'
export default {
    name: 'ProjectsTable',
    components: { NoData },
    props: {
        tableData: {
            type: Object,
            required: true
        }
    },
    computed: {
        ...mapGetters({
            tableSortCondition: 'common/getTableSortCondition'
        })
    },
    methods: {
        ...mapMutations({
            setTableSortCondition: 'common/setTableSortCondition'
        }),
        handleToSet (scope) {
            this.$router.push(`/projectSet/${scope.row.projectId}`)
            localStorage.setItem('currentProjectName', scope.row.projectName)
        },
        handleToExp (id) {
            localStorage.setItem('projectId', id)
            localStorage.setItem('showOps', '0')
            window.open(`${location.origin}/exp/index.html`)
        },
        tableSortChange (val) {
            let data = {
                prop: val.prop,
                order: val.order
            }
            this.setTableSortCondition(data)
        }
    }
}
</script>
